<template>
  <a-drawer
    :width="1000"
    closable
    :body-style="{padding:'12px'}"
    placement="right"
    :visible="visible"
    @close="visible=false"
  >
    <div slot="title" class="g-flex g-y-center">
      <div style="color: #000000;font-weight: bold;">治疗明细</div>
      <div style="font-size: 12px;margin-left: 30px;color: #333333;">姓名：{{row_record.name}}</div>
      <div style="font-size: 12px;margin-left: 20px;color: #333333;">卡号：{{row_record.cardNo}}</div>
    </div>
    <div class="position-content">
      <a-tabs :activeKey="currentActiveKey" @change="changeTabs" :forceRender="false"  type="line" style="height: 100%;">
        <a-tab-pane :key="1" tab="基本信息">
          <a-table
            bordered
            size="small"
            :columns="baseInfoColumns"
            :data-source="baseInfoTable"
            :rowKey="(record,index)=> index"
          >
          </a-table>
        </a-tab-pane>
        <a-tab-pane :key="2" tab="门诊处方">
          <a-table
            :scroll="{x:850}"
            bordered
            size="small"
            :columns="outpatientRecipeColumns"
            :data-source="PrescriptionTableData"
            :rowKey="(record,index)=> index"
          >
          </a-table>
        </a-tab-pane>
        <a-tab-pane :key="3" tab="医嘱情况" >
          <a-radio-group  v-model="doctorAdviceSituation"  style="margin-bottom: 15px;">
            <a-radio-button :value="1">未执行</a-radio-button>
            <a-radio-button :value="2">执行信息</a-radio-button>
          </a-radio-group>
          <!--未执行信息-->
          <div v-show="doctorAdviceSituation===1" >
            <span v-show="!isAwaitDoctorAdviceSituation">
              <a-button type="primary"  :disabled="executeDoctorAdviceDisabled" @click="executeDoctorAdvice">执行医嘱</a-button>
            </span>
            <span v-show="isAwaitDoctorAdviceSituation">
              <a-button icon="left" type="primary" @click="isAwaitDoctorAdviceSituation = false ">返回</a-button>
              <a-button type="primary" style="margin-left: 15px;"  @click="comfirmExecute">确认执行</a-button>
            </span>
            <a-table
              bordered
              style="margin-top: 10px;"
              :scroll="{x:850}"
              size="small"
              :columns="isAwaitDoctorAdviceSituation?awaitDoctorAdviceSituationColumns:doctorAdviceSituationColumns"
              :data-source="isAwaitDoctorAdviceSituation?awaitDoctorAdviceSituationTableData:orderSituationTable"
              :rowKey="(record,index)=> index"
            >
            </a-table>

            <span v-show="isAwaitDoctorAdviceSituation">
              <a-popover :visible="popoverVisible" @visibleChange="visibleChange" autoAdjustOverflow trigger="click" placement="right">
                <template slot="title"><span>选择产品</span></template>
                <template slot="content">
                  <div style="width:600px;">
                    <div class="table-page-search-wrapper">
                      <a-form layout="inline">
                        <a-row :gutter="24">
                          <a-col :span="12">
                            <a-form-item label="拼音码" style="margin-bottom: 0;">
                              <a-input v-decorator="['cardNo']" allow-clear placeholder="请输入" />
                            </a-form-item>
                          </a-col>
                          <a-col :span="12">
                            <a-form-item label="产品名称" style="margin-bottom: 0;">
                              <a-input v-decorator="['cardNo']" allow-clear placeholder="请输入" />
                            </a-form-item>
                          </a-col>
                        </a-row>
                      </a-form>
                    </div>
                    <!--按钮里面的表格-->
                    <super-table
                      :pageSize="10"
                      style="margin-top: 15px;"
                      size="small"
                      :columns="productColumns"
                      :data="loadDataProduct"
                      :rowKey="(record)=> record.itemId"
                      :customRow="clickRow"
                    >
                    </super-table>
                  </div>
                </template>
                <a-button icon="plus-circle" type="primary">添加物料</a-button>
              </a-popover>
              <a-table
                bordered
                style="margin-top: 10px;"
                :scroll="{x:850}"
                size="small"
                :columns="materialDetailsColumns"
                :data-source="materialDetailsTable"
                :rowKey="(record,index)=> index"
              >
              </a-table>
            </span>

          </div>
          <!--已执行信息-->
          <div v-show="doctorAdviceSituation===2" class="info-wrapper g-flex"  >
            <div class="execute-info">
              <h3 class="title">执行信息</h3>
              <div class="execute-info-wrapper">
                <div
                  v-for="(item,index) in doctorAdviceInfo"
                  :key="index"
                  class="g-flex g-x-between g-y-center"
                  style="margin-bottom:13px;cursor: pointer;"
                  :class="{'currentTemplatelass':currentDoctorAdviceInfoIndex===index}"
                  @click="clickDoctorAdviceInfoItem(item,index)"
                >
                  <span>执行时间：<span style="font-size: 13px;">{{ item.execDate }}</span> </span>
                  <span>执行人：{{ item.executor }}</span>
                </div>
              </div>

            </div>
            <div class="product-info" style="width: 61%;padding: 0 12px;">
              <super-table
                ref="DoctorAdviceInfoProductTable"
                :pageSize="10"
                size="small"
                :columns="productInfoColumns"
                :data="loadDataDoctorAdviceInfoProduct"
                :rowKey="(record,index)=> index"
              >
                <template slot="operator">
                  <h3 class="title">产品信息</h3>
                </template>
              </super-table>
            </div>
          </div>
        </a-tab-pane>
<!--        <a-tab-pane :key="4" tab="用料管理">-->
<!--          <a-table-->
<!--            :scroll="{x:850}"-->
<!--            bordered-->
<!--            size="small"-->
<!--            :columns="materialSituationColumns"-->
<!--            :data-source="tableData"-->
<!--            :rowKey="(record,index)=> index"-->
<!--          >-->
<!--          </a-table>-->
<!--        </a-tab-pane>-->
      </a-tabs>
    </div>
  </a-drawer>
</template>

<script>
import {
  DoctorBasicInformation,
  orderSituation,
  ExecuteDoctorOrder,
  getItemProduct,
  PrescriptionList,
  saveExecuteDoctorOrder,
  DoctorOrderInfo,
  DoctorOrderInfoProduct
} from '@/api/workstation/doctor'
import {columns} from './columns'
import { SuperTable } from '@/components'

export default {
  components:{
    SuperTable
  },
  data () {
    return {
      row_record:{},
      tableData:[],
      visible:false,
      spinning:false,
      form: this.$form.createForm(this),
      currentActiveKey: 1,
      doctorAdviceSituation:1,
      //基本信息
      baseInfoColumns: columns.baseInfoColumns,
      //门诊处方
      outpatientRecipeColumns: columns.outpatientRecipeColumns,
      //医嘱情况
      doctorAdviceSituationColumns:[
        { title: '序号', customRender:(text,record,index)=>index+1,width:50,fixed:'left' },
        { title: '是否提交',
          // scopedSlots: { customRender: 'isSubmit' },
          customRender: (text, record, index) => {
            return {
              children: <a-checkbox checked={record.isSubmit} onChange={e => this.checkChange(e,index,'isSubmit')}/>,
              attrs: {
                rowSpan: record.group,
              }
            }
          },
          width: 80,
          align:'center'
        },
        { title: '组号',
          dataIndex: 'groupId',
          width: 60,
          customRender: (text, record, index) => {
            return {
              children: text,
              attrs: {
                rowSpan: record.group,
              }
            }
          },
          ellipsis: true
        },
        { title: '临/嘱', dataIndex: 'ftype', width: 70, ellipsis: true},
        { title: '医嘱', dataIndex: 'itemName', ellipsis: true },
        { title: '规格', dataIndex: 'spec',width: 70, ellipsis: true },
        { title: '下达日期', dataIndex: 'startDate', width: 90, ellipsis: true },
        { title: '首次用量', dataIndex: 'firstDosage', width: 80,ellipsis: true },
        { title: '每次用量', dataIndex: 'dosage', width: 80, ellipsis: true },
        { title: '用量/单位', dataIndex: 'unit', width: 80, ellipsis: true },
        { title: '用药/频率', dataIndex: 'useTimes', width: 80, ellipsis: true },
        { title: '用药途径', dataIndex: 'useWays', width: 80, ellipsis: true }
      ],
      awaitDoctorAdviceSituationColumns:columns.awaitDoctorAdviceSituationColumns,
      //物料明细
      materialDetailsColumns: columns.materialDetailsColumns,
      //医嘱情况-执行信息-产品信息
      productInfoColumns: columns.productInfoColumns,
      //用料管理
      materialSituationColumns: columns.materialSituationColumns,
      //产品
      productColumns: columns.productColumns,
      awaitDoctorAdviceSituationTableData:[],
      isAwaitDoctorAdviceSituation:false,
      popoverVisible:false,
      productTable:[],
      baseInfoTable:[], //基本信息
      orderSituationTable:[], //医嘱情况
      PrescriptionTableData:[],//门诊处方
      materialDetailsTable:[],
      //获取物料
      product_queryParam:{
        pageNum:1,
        pageSize :10
      },
      loadDataProduct: parameter => {
        return getItemProduct(parameter).then(res => {
          return res
        })
      },
      /**
       * 执行信息-产品信息
       * */
      DoctorAdviceInfoProductQueryParam:{
        treatId :'',
        execId :''
      },
      loadDataDoctorAdviceInfoProduct: parameter => {
        if(!this.DoctorAdviceInfoProductQueryParam.execId) return new Promise(resolve => resolve(null))
        return DoctorOrderInfoProduct(Object.assign(parameter,this.DoctorAdviceInfoProductQueryParam)).then(res => {
          console.log('执行信息-产品信息',res)
          return res
        })
      },
      currentSelectGroud:'',
      doctorAdviceInfo:[],
      doctorAdviceInfoProduct:[],
      currentDoctorAdviceInfoIndex:0,
    }
  },
  computed:{
    executeDoctorAdviceDisabled(){
      let flag = true
      for (const item of this.orderSituationTable){
        if(item.isSubmit){
          flag = false
          break
        }
      }
      return flag
    }
  },
  methods: {
    show (record) {
      this.visible = true
      this.row_record=record
      this.getTtreatmentDetails()
      this.getOrderSituation()
      this.getPrescriptionList()
    },
    getExecuteDoctorOrder(treatId,groupId){
      ExecuteDoctorOrder({treatId,groupId}).then(res=>{
        // console.log('执行医嘱情况',res)
        this.awaitDoctorAdviceSituationTableData = res.rows
      })
    },
    /**
     * 处方列表
     * */
    getPrescriptionList(){
      const treatId = this.row_record.treatId
      const customerId =this.row_record.customerId
      PrescriptionList({ treatId,customerId }).then(res=>{
        // console.log('处方列表',res)
        this.PrescriptionTableData = res.rows
      })
    },
    getOrderSituation(){
      const treatId =this.row_record.treatId
      orderSituation({treatId}).then(res=>{
        // console.log('医嘱情况',res)
        res.rows.forEach(item=>{
          item.isSubmit = false
        })
        this.orderSituationTable = res.rows
      })
    },
    getTtreatmentDetails(){
      this.spinning = true
      const params = { treatId:this.row_record.treatId }
      DoctorBasicInformation(params).then(res=>{
        this.spinning = false
        this.baseInfoTable = res.rows
      })
    },
    /**
     * 执行医嘱
     * */
    executeDoctorAdvice(){
      this.isAwaitDoctorAdviceSituation = true
      this.getExecuteDoctorOrder(this.currentSelectGroud.treatId,this.currentSelectGroud.groupId)
    },
    /**
     * 确认执行执行医嘱
     * */
    comfirmExecute(){
      const nurseWorkstationDtoList = this.awaitDoctorAdviceSituationTableData.concat(this.materialDetailsTable)
      console.log('治疗id',this.row_record,this.row_record.treatid)
      const params = {
        treatId:this.row_record.treatId,
        nurseWorkstationDtoList,
        groupId:this.awaitDoctorAdviceSituationTableData[0].groupId
      }
      saveExecuteDoctorOrder(params).then(res=>{
        console.log('确认执行结果',res)
        if(res.code == 200){
          this.getOrderSituation()
          this.getDoctorOrderInfo() //执行信息
          this.doctorAdviceSituation = 2
          this.$message.success(res.message)
        }
        else this.$message.warning(res.message)
      })
    },
    /**
     * 执行信息
     * */
    getDoctorOrderInfo(){
      const treatId = this.row_record.treatId
      DoctorOrderInfo({treatId}).then(res=>{
        console.log('医嘱执行信息',res)
        this.doctorAdviceInfo = res.rows
        if(res.rows.length>0){
          const rows = res.rows[0]
          this.DoctorAdviceInfoProductQueryParam.treatId = treatId
          this.DoctorAdviceInfoProductQueryParam.execId =rows.execId
          this.$refs.DoctorAdviceInfoProductTable.refresh(true)
        }
      })
    },
    /**
     * 点击执行信息获取产品信息
     * **/
    clickDoctorAdviceInfoItem(item,index){
      if(this.currentDoctorAdviceInfoIndex==index) return
      this.currentDoctorAdviceInfoIndex = index ||0
      this.DoctorAdviceInfoProductQueryParam.treatId = this.row_record.treatId
      this.DoctorAdviceInfoProductQueryParam.execId = item.execId
      this.$refs.DoctorAdviceInfoProductTable.refresh(true)
    },
    /**
     * 控制显示预存款气泡卡片
     * */
    visibleChange(visible){
      this.popoverVisible=visible
    },
    changeTabs(key) {
      this.currentActiveKey = key
      if(key == 3){
        this.getDoctorOrderInfo() //执行信息
      }
    },
    /**
     勾选是否提交
     * */
    checkChange(e, index, column) {
      const value = e.target.checked
      this.orderSituationTable.forEach(item=>{
        item.isSubmit = false
      })
      this.orderSituationTable[index][column] = value
      this.currentSelectGroud = this.orderSituationTable[index]
      console.log('当前选择组',this.currentSelectGroud)
    },
    /**
     表格行点击事件
     * */
    clickRow(record){
      return {
        on: {
          dblclick:(e)=>{
            console.log('record',record)
            this.materialDetailsTable.push(record)
          }
        }
      }
    },
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-table-small > .ant-table-content > .ant-table-body{
  margin: 0;
}
/deep/ .ant-tabs-content{
  height: 100%;
}
.position-content{
  position: absolute;
  right: 12px;
  left: 12px;
  bottom: 0;
  top: 60px;
}
.info-wrapper{
  height: 100%;
  padding-top: 5px;
  border-top: 1px solid #cccccc;
  .title{
    color: #999999;
    margin-top: 5px;
  }
}
.execute-info{
  border-right: 1px #e8e8e8 solid;
  padding: 0 12px;
  width: 39%;
  .execute-info-wrapper{
    overflow: auto;
    height: 80%;
  }
}
.currentTemplatelass{
  color: #3399ff;
}

</style>

